<template>
  <el-row style="min-width: 100rem;min-height: 46rem;" v-loading="loading2" element-loading-text="拼命解析中"
    element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255, 1)">
    <el-row>
      <el-col :span="6">
        <div style="padding:.625rem 2rem;text-align: right;">
          <img src="../../public/img/title.png" style="width:15.25rem;height:4.25rem;padding-left:14.5%" alt="">
        </div>
      </el-col>

      <el-col :span="14">
        <el-row class="heard_ti_til">
          <div class="hover_color">首页</div>
          <div class="hover_color" @click="out">智能诊断</div>
          <div class="hover_color" @click="out">一键诊断</div>
          <div class="hover_color" @click="go_url('/zplist')">诊断记录</div>
          <div class="hover_color" @click="open_cj">操作教程</div>
          <div class="hover_color">常见问题</div>

        </el-row>
      </el-col>
      <el-col :span="4" style="line-height: 90px;
      height: 90px;">
        <el-button type="primary" @click="dialogFormVisible = true">登录</el-button>
        <el-button type="primary" @click="dow_cj">安装插件</el-button>

      </el-col>
    </el-row>


    <el-carousel height="40.625rem" indicator-position="outside">
      <el-carousel-item v-for="(item) in imgList">
        <el-image :src="item" fit="cover"></el-image>
      </el-carousel-item>
      <div class="botton" @click="out">点击立即诊断</div>
    </el-carousel>



    <div class="diasnosePage_foot">
      <div class="diasnosePage_foot_center">
        <div class="diasnosePage_foot_center_title">
          <div id="tilte_bluetab" ref="bluetab"></div>
          <div class="diasnosePage_foot_center_title_tab" ref="tab1" @click="tabclick('tab1')">
            <span>诊断项目</span>
          </div>
          <div class="diasnosePage_foot_center_title_tab" ref="tab2" @click="tabclick('tab2')">
            <span>操作流程</span>
          </div>
          <div class="diasnosePage_foot_center_title_tab" ref="tab3" @click="tabclick('tab3')">
            <span>常见问题</span>
          </div>
        </div>
        <div class="diasnosePage_foot_center_content">
          <div ref="tab2content" style="display: none" class="foot_center_content_sysm">
            <h1>使用说明</h1>
            第一步
            <p>
              用抖店主账户登入服务市场,搜索智能诊断，点击订购有7天试用,1个月,3
              个月,和一年的订购。
            </p>
            第二步
            <p>订购好授权使用</p>
            第三步
            <p>
              授权使用后进入智能诊断页面，下载插件安装，在点击页面的立即诊断
              就会给出一套完整的店铺诊断报告
            </p>
          </div>
          <div ref="tab3content" style="display: none" class="foot_center_content_cjwt">
            <h1>常见问题</h1>
            1、
            <p>订购是需要主账户订购才可以使用</p>
            2、
            <p>
              点立即诊断没反应是因为没有安装插件安装好插件就可以实现一键诊断
            </p>
            3、
            <p>诊断数据没显示，是因为你店铺后台这个诊断项是没有数据的原因</p>
            4、
            <p>试用7天后,必须订购才可以再次使用立即诊断</p>
            5、
            <p>数据报表可以下载吗?答案是可以下载一键提取</p>
          </div>
          <ul ref="tab1content" class="foot_center_content_list">
            <li class="znzdxm">
              <h5>智能诊断</h5>
              <div class="card">
                <p>智能诊断 一键分析</p>
                <p>像医生一样给你数据</p>
                <p>店铺报告，</p>
                <p>运营如此简单</p>
              </div>
            </li>
            <li class="znzdxm">
              <h5>诊断项目</h5>
              <ul>
                <li>
                  抖店体验分
                </li>
                <li>
                  奖惩中心
                </li>
                <li>
                  商品诊断
                </li>
                <li>
                  商品运营
                </li>
                <li>
                  优价推手
                </li>
                <li>
                  商品管理
                </li>
                <li>
                  订单管理
                </li>
                <li>
                  评价管理
                </li>
                <li>
                  物流诊断
                </li>
                <li>
                  售后工作台
                </li>
                <li>
                  售后小助手
                </li>
                <li>
                  营销
                </li>
                <li>
                  内容
                </li>
                <li>
                  用户
                </li>
                <li>
                  电商罗盘
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="24" class="ppp" >
        浙ICP备2022033280号-2
      </el-col>
    </el-row>
    <el-row>
      <!-- <el-col :span="24" class="ppp">
        浏览该网站表示您接收并同意我们使用cookies为您提供个性化的浏览体验。如需更改管理，请点击 隐私条款 了解详情
      </el-col> -->
    </el-row>
    <el-dialog
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>{{ dialogMessage }}{{times_type}}秒后自动关闭</span>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button @click="junp">确定</el-button> -->
      <!-- <el-button type="primary" @click="dialogVisible = false">Confirm</el-button> -->
    </span>
  </el-dialog>
    <el-dialog title="登录" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="手机号" prop="pass">
          <el-input type="number" v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="form.pass" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" class="open_2" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    
  </el-row>
</template>
<script>
   import axios from 'axios'
  import Fingerprint2 from 'fingerprintjs2'
 
  export default {
    components: {

    },
    data() {
      return {
        once:0,
        loading2: true,
        time:'',
        dialogFormVisible: false,
        times_type:5,
        dialogVisible: false,
      dialogMessage: '智能诊断需要登录抖店',
        shop_id: '',
        form: {
          phone: '',
          pass: '',

        },
        timer: '',
        dg_type: true,
        imgList: [
          // require(`@/public/img/home001.png`),
          // require('../../public/img/home001.png'),
          require('../../public/img/home002.png'),
          require('../../public/img/home003.png'),
        ]
      };
    },
    
 
    methods: {
      reque_ht_code(){
        var that=this
        Fingerprint2.get(function(components){
    const values=components.map(function(component,index){
      if(index===0){
        return component.value.replace(/\bNetType\/\w+\b/,'')
      }
      return component.value
      
    })
    const murmur=Fingerprint2.x64hash128(values.join(''),31)
    axios({
                method: 'post',
                url: 'http://doudian-api.fd1.cc/api/query_agent_fp',
                params:{
                  'fp':murmur,
                  'shop_id':that.$store.state.shop_id
                }
            })
                .then(function (response) { 
                 console.log(response)
                  
                   
                })
                .catch(function (error) {
                    console.log(error)
                })
      console.log('浏览器指纹吗',murmur)
      
  })
      },
      dow_cj() {
        // const ru = this.$router.push({ path: '/cj' })
        window.open('http://znzd.duomiluo.cn/cj', '_blank')
        // const url = `${location.origin}/#/cj`
        // window.open(url, "_blank");
      },
      open_cj() {
        window.open('https://tos2h6nm49.feishu.cn/docx/SOvSdRrA6oSYSCxip41cgJ5sn6b?from=from_copylink', '_blank')
        //   const ru=  this.$router.resolve({ path: '/cj' })
        // window.open(ru.href,'_blank')
        // this.$router.
        // const url = `${location.origin}/#/cj`
        // window.open(url, "_blank");
      },
      go_url(url) {

        this.$router.push(url)

      },
      junp(){
 
        this.dialogVisible = false
        // var  tempWin  = window.open("_blank");
        // var  tempWin1  = window.open("_blank");
        // tempWin.location.href = "https://compass.jinritemai.com/shop?btm_ppre=a0.b0.c0.d0&btm_pre=a2427.b76571.c4158.d20759_i3";
        // tempWin1.location.href = 'https://fxg.jinritemai.com/login/common'

        var b= document.createElement('a')
                b.setAttribute('href', 'https://compass.jinritemai.com/shop?btm_ppre=a0.b0.c0.d0&btm_pre=a2427.b76571.c4158.d20759_i3');
                b.setAttribute('target', '_blank');
                b.setAttribute('download', 'open_wind');
                document.body.appendChild(b)
          b.click()
          b.remove()
      
          //     var a = document.createElement('a');
          // a.setAttribute('href', 'https://fxg.jinritemai.com/login/common');
          // a.setAttribute('target', '_blank');
          // a.setAttribute('download', 'open_wind');
          // document.body.appendChild(a)
          // a.click()
          // a.remove()
          // // 防止反复添加
          // if(!document.getElementById('open_wind')) document.body.appendChild(a);
          // a.click();
          var b = document.createElement('a');
          b.setAttribute('href', 'https://fxg.jinritemai.com/login/common');
          b.setAttribute('target', '_blank');
          b.setAttribute('id', 'open_wind2');
          // 防止反复添加
          if(!document.getElementById('open_wind2')) document.body.appendChild(b);
          b.click();
                var a= document.createElement('form')
              a.action='https://fxg.jinritemai.com/login/common'
              a.target='_blank'
              a.method='POST'
              document.body.appendChild(a)
              a.submit()
              this.times_type=5
              clearInterval(this.time)
      },
      tabclick(active) {
        const buttonElement = this.$refs.bluetab;
        const buttontab1 = this.$refs.tab1;
        const buttontab2 = this.$refs.tab2;
        const buttontab3 = this.$refs.tab3;
        const tab1Content = this.$refs.tab1content;
        const tab2Content = this.$refs.tab2content;
        const tab3Content = this.$refs.tab3content;

        if (active == "tab1") {
          console.log(buttonElement);
          buttonElement.style = "left:0;";
          buttontab1.style = "color:#fff;";
          buttontab2.style = "color:#565960;";
          buttontab3.style = "color:#565960;";
          tab1Content.style = "display:block";
          tab2Content.style = "display:none";
          tab3Content.style = "display:none";
        }
        if (active == "tab2") {
          console.log(buttonElement);
          buttonElement.style = "left:294.99px;";
          buttontab2.style = "color:#fff;";
          buttontab1.style = "color: #565960;";
          buttontab3.style = "color: #565960;";
          tab1Content.style = "display:none";
          tab2Content.style = "display:block";
          tab3Content.style = "display:none";
        }
        if (active == "tab3") {
          console.log(buttonElement);
          buttonElement.style = "left:594px;";
          buttontab3.style = "color:#fff;";
          buttontab1.style = "color: #565960;";
          buttontab2.style = "color: #565960;";
          tab1Content.style = "display:none";
          tab2Content.style = "display:none";
          tab3Content.style = "display:block";
        }
      },

      get_token() {

      },
      out() {
        var that = this
        //     const cookieString = document.cookie;
        // console.log('cookiesss',cookieString)
        // const cookies = {};
        // cookieString.split(';').forEach(function(cookie) {
        //     const [name, value] = cookie.trim().split('=');
        //     cookies[name] = decodeURIComponent(value);
        // });

        // this.$store.state.shop_id='85312841'
        // this.$store.state.lp=true
        this.$store.state.shop_id = $cookies.get('zhineng_shopId')
        this.$store.state.lp = $cookies.get('lp_shopId')
        // if (!true) { 
        if (!window.aaa) {
          this.$message.error('您必须安装正版插件才能使用');
        } else {
          window.aaa = ''
          console.log('查看情况',this.$store.state.shop_id ,that.$store.type)
          if (this.$store.state.shop_id && that.$store.type) {
            that.reque_ht_code()
            if (that.$store.state.lp && that.$store.lptype) {
            var type=  that.get_dq_code()
              if (this.dg_type) {
                this.$router.push({ path: '/index' })
              } else {
                setTimeout(function () { window.open('https://fuwu.jinritemai.com/detail?service_id=25328', '_blank') }, 5000);

                this.$alert('自动跳转', '用户未订购', {
                  confirmButtonText: '取消',
                  callback: action => {
                  }
                });
              }
            } else {
              window.open('https://compass.jinritemai.com/shop?btm_ppre=a0.b0.c0.d0&btm_pre=a2427.b76571.c4158.d20759_i3', '_blank')
              this.dialogVisible = true;
              this.dialogMessage='自动打开罗盘页面'
             
          that.timer = setInterval(() => {
            that.times_type=that.times_type-1
            if (that.times_type<= 0) {
              this.times_type=5
              this.dialogVisible =false
             
              clearInterval(that.timer)
            }
          }, 1000)
              // this.$alert('自动打开罗盘页面', '需要登录罗盘', {
              //   confirmButtonText: '取消',
              //   callback: action => {
              //   }
              // });
              // this.$router.push({ path: 'https://fxg.jinritemai.com/login/common' })
            }
          } else {
          //   that.time=setInterval(function(){
         
          //     if(that.times_type==0){
          //       // if(that.dialogVisible==true){
          // //         that.times_type=5
          // //       clearInterval(that.time)
          // //       that.dialogVisible = false;
          // //       var a = document.createElement('a');
          // // a.setAttribute('href', 'https://fxg.jinritemai.com/login/common');
          // // a.setAttribute('target', '_blank');
          // // a.setAttribute('id', 'open_wind2');
          // // // 防止反复添加
          // // if(!document.getElementById('open_wind2')) document.body.appendChild(a);
          // // a.click();
          //     //   var a= document.createElement('a')
          //     // a.action='https://fxg.jinritemai.com/login/common'
          //     // a.target='_blank'
          //     // a.method='POST'
          //     // document.body.appendChild(a)
          //     // a.submit()
          //       // }
              
          //     }else{
          //       that.times_type=that.times_type-1
          //       that.dialogMessage = that.times_type+'秒后自动跳转到抖店';
          //     }
              
          //   },1000)
            
      this.dialogVisible = true;
          //   setTimeout( () => {
          //     window.location.assign("https://fxg.jinritemai.com/login/common")

          //   }
          // ,5000);
          that.timer = setInterval(() => {
            that.times_type=that.times_type-1
            if (that.times_type<= 0) {
              this.times_type=5
              this.dialogVisible =false
              
              clearInterval(that.timer)
            }
          }, 1000)
     if(that.once==0){
      window.open('https://fxg.jinritemai.com/login/common', '_blank');
      that.once=1
     }
            
        
        
        //     this.$confirm((this.times_type)+'秒后自动跳转，智能诊断需要登录抖店', '请登录抖店', {
        //       confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning',
              
        //     }).then(() => {
        //      var a= document.createElement('form')
        //       a.action='https://fxg.jinritemai.com/login/common'
        //       a.target='_blank'
        //       a.method='POST'
        //       document.body.appendChild(a)
        //       a.submit()
        //         // window.open('https://fxg.jinritemai.com/login/common', '_blank');
        //         var b= document.createElement('form')
        //         b.action='https://compass.jinritemai.com/shop?btm_ppre=a0.b0.c0.d0&btm_pre=a2427.b76571.c4158.d20759_i3'
        //         b.target='_blank'
        //         b.method='POST'
        //       document.body.appendChild(b)
        //       b.submit()
        //         var b= document.createElement('form')
        //       // b.href='https://compass.jinritemai.com/shop?btm_ppre=a0.b0.c0.d0&btm_pre=a2427.b76571.c4158.d20759_i3'
        //       // b.click()
                 
                    
               
        //       // window.open('https://compass.jinritemai.com/shop?btm_ppre=a0.b0.c0.d0&btm_pre=a2427.b76571.c4158.d20759_i3', '_blank')
             
             
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消删除'
        //   });          
        // });
           
          }
        }
      },
      //          checkPlugins(name) {
      //           name = name.toLowerCase();

      //           let result = false;
      //     for (var i = 0; i < navigator.plugins.length; i++) {
      //         if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
      //             result = true
      //         }
      //     }
      //     console.log('测试',result)
      //     if (!result) {
      //         try {
      //             new ActiveXObject(name);
      //             result = true;
      //         } catch (ex) {
      //             result = false;
      //         }
      //     }
      //     return result;
      // },

      async downLoad(fileName, filePath) {
        //   console.log(111)
        // const ru=  this.$router.resolve({ path: '/cj' })
        // window.open(ru.href,'_blank')
        // }
        this.$router.push({
          path: '/cj'
        })
      },
      handleClose(done) {
        this.times_type=5
        this.dialogMessage = this.times_type+'秒后自动跳转到抖店,需要登录店铺';
        this.dialogVisible = false;
        clearInterval(this.time)
    },
    get_dq_code(){

    }
    },
    mounted: function () {
         

       
      
    
      var that = this


      window.addEventListener('message', (e) => {
       
        if (e.data.xz == 1) {
          if (e.data.type) {
            that.$store.type = true
          } else {
            that.$store.type = false
          }
        } else if (e.data.xz == 2) {
          if (e.data.type1) {
            that.$store.lptype = true
          } else {
            that.$store.lptype = false
          }
        }



      })



      setTimeout(function () {
        that.loading2 = false
  
        if (!window.aaa) {

          var a = 0
          that.timer = setInterval(() => {
            that.$message.error('您必须安装正版插件才能使用');
            a++
            if (a >= 5) {
              clearInterval(that.timer)
            }
          }, 1000)
        }

      }, 2000)



    },
    created: function () {
      var that = this

      if (that.$store.user == undefined) {
        // axios({
        //         method: 'get',
        //         url: 'http://doudian-api.fd1.cc/api/shop_info?shop_id='+that.$store.state.shop_id
        //     })
        //         .then(function (response) {
        //             console.log('个人信息',response.data.data)

        //             that.$store.user=response.data.data


        //         })
        //         .catch(function (error) {
        //             console.log(error)
        //         })

      }



    }
  }
</script>
<style lang="less">
  .ppp{
    text-align: center;
    padding: 20px;
  }
  .hover_color:hover {
    color: rgb(0, 119, 255);
  }

  .heard_ti_til {
    display: -webkit-inline-box;
    line-height: initial;
    font-weight: bold;
    height: 3.75rem;

    div {
      margin: 0 1.125rem;
      line-height: 6.25rem;
      cursor: pointer;
    }
  }

  .titlet {
    text-align: center;
    height: 100%;
    line-height: 5.625rem;
    font-size: 1rem;
  }

  .titlet:hover {
    cursor: pointer;
  }

  .el-image {
    position: relative;
    display: inline;
    overflow: hidden;
  }

  .el-image__inner {
    width: 100%;
    height: 40.625rem;
    min-height: 40.625rem;
  }

  @keyframes move {
    0% {
      transform: translate(0px, 0px);
    }

    50% {
      transform: translate(-10px, -5px);
    }

    100% {
      transform: translate(0px, 0px);
    }

  }

  .botton {
    /* position: absolute;
        left: 74vw;
        top: 17.75rem;
        width: 18.75rem;
        font-size: 2.1875rem;
        height: 6.25rem;
        box-shadow: 10px 10px 10px #a7640fc4;
        animation: move 2s linear infinite;
        background: #f37200;
        color: #fff; */
    /* z-index: 9999; */
    /* border: .25rem solid #fff; */
    padding: .9375rem;
    border: none;
    border-radius: 1.5625rem;
    text-shadow: .25rem .25rem .5rem rgba(0, 0, 0, 0.8);
    border: 3px #fff solid;
    background: #ea4819;
    position: absolute;
    top: 14.5rem;
    right: 11.25rem;
    font-size: 3rem;
    letter-spacing: .1875rem;
    z-index: 50;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
  }

  .diasnosePage_foot {
    background: #f4f4f4;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 33.8125rem;
    width: 100%;
    padding-bottom: 3.125rem;

    .diasnosePage_foot_center {
      margin-top: 1.875rem;
      width: 92.5rem;
      align-items: center;
      display: flex;
      flex-direction: column;

      .diasnosePage_foot_center_content {
        width: 100%;
        height: 38.75rem;
        margin-top: 1.25rem;
        border-radius: 1.25rem;
        padding: 1.25rem;
        box-sizing: border-box;
        /* background: url("../assets/diagnoseImage/bg001.png") 100% 100% no-repeat; */
        background: url("../assets/diagnoseImage/bg001.png");

        .foot_center_content_list {
          list-style: none;
          height: 100%;
          padding: 1.25rem;
          box-sizing: border-box;

          .znzdxm {
            height: 100%;

            &:nth-of-type(1) {
              border-right: 2px #ccc dashed;
            }

            h5 {
              text-align: center;
              font-size: 1.875rem;
              font-weight: 400;
              color: #000;
              padding-bottom: 20px;
            }

            float: left;

            &:nth-of-type(1) {
              width: 45%;

              .card {
                width: 55%;
                margin: 0 auto;
                display: flex;
                height: 23.75rem;
                margin-top: .625rem;
                justify-content: space-between;
                flex-direction: column;

                overflow: hidden;
                border-radius: .625rem 0 0 .625rem;
              }

              p {
                margin: 1.875rem 0;
                font-size: 1.875rem;
                margin-left: 1.25rem;
                color: #000;
              }
            }

            &:nth-of-type(2) {
              width: 50%;
              text-align: center;
              overflow: hidden;

              ul {
                width: 87%;
                margin-left: 9.0625rem;
                height: 100%;
                list-style: none;
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                border-radius: 0 10px 10px 0;

                li {
                  width: 47%;
                  margin-top: 20px;
                  margin-left: 19px;
                  font-size: 22px;
                  height: 22px;
                  color: #000;
                  line-height: 25px;
                  display: flex;
                  justify-content: space-between;
                }
              }
            }
          }
        }

        .foot_center_content_sysm {
          height: 100%;
          width: 100%;
          font-size: 20px;
          padding: 20px;
          box-sizing: border-box;

          h1 {
            text-align: center;
            height: 60px;
            font-size: 30px;
            font-weight: 400;
            margin-bottom: 20px;
          }

          p {
            color: #565960;
            margin: 25px 0;
          }
        }

        .foot_center_content_cjwt {
          width: 100%;
          height: 100%;
          padding: 10px 20px;
          box-sizing: border-box;
          font-size: 20px;

          h1 {
            font-weight: 400;
            text-align: center;
            height: 60px;
            line-height: 60px;
            margin-bottom: 20px;
            font-size: 30px;
          }

          p {
            color: #565960;
            margin: 20px 0;
          }
        }
      }

      .diasnosePage_foot_center_title {
        align-items: center;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        position: relative;
        background: #fff;
        border: 1px solid #fff;
        box-sizing: border-box;
        height: 78px;
        padding: 4px;
        width: 890.99px;

        #tilte_bluetab {
          position: absolute;
          top: 0;
          left: 0;
          // display: none;
          border-radius: 6px;
          height: 100%;
          width: 294.99px;
          background: linear-gradient(to right, #ff8260, #ea4819);
          box-sizing: border-box;
          transition: left 0.5s ease;
        }

        .diasnosePage_foot_center_title_tab {
          cursor: pointer;
          font-size: 22px;
          height: 100%;
          line-height: 21px;
          opacity: 0.85;
          transition: all 0.3s;
          width: 462.99px;
          z-index: 1;
          align-items: center;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          position: relative;
          color: #565960;

          &:nth-last-of-type(3) {
            color: #fff;
          }

          span {
            vertical-align: middle;
            display: inline-block;
            margin-left: 5px;
          }
        }
      }
    }
  }
</style>